<template>
  <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" text-color="#fff"
    :collapse="$store.state.isCollapse" :router="true" :default-active="$route.path" :collapse-transition="false">
    <!-- 去除过渡动画 -->

    <!-- 三目运算符判断收起和展开，使用不同标题 -->
    <h3>{{ !$store.state.isCollapse ? "商城后台管理" : "管理" }}</h3>

    <!-- 单级菜单 -->
    <el-menu-item v-for="item in noChildren()" :key="item.index" :index="item.index + ''">
      <el-icon>
        <font-awesome-icon :icon="item.icon" />
      </el-icon>
      <span>{{ item.label }}</span>
    </el-menu-item>

    <!-- 多级菜单 -->
    <el-sub-menu v-for="item in hasChildren()" :key="item.name" :index="item.name + ''">
      <template #title>
        <el-icon>
          <font-awesome-icon :icon="item.icon" />
        </el-icon>
        <span>{{ item.label }}</span>
      </template>
      <!-- 子级菜单 -->
      <el-menu-item v-for="subItem in item.children" :index="subItem.index + ''" :key="item.index">
        <el-icon>
          <font-awesome-icon :icon="subItem.icon" />
        </el-icon>
        <span>{{ subItem.label }}</span>
      </el-menu-item>
    </el-sub-menu>

  </el-menu>
</template>

<script setup>
import { onMounted, ref } from 'vue';
// import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const menuData = ref([]);
const store = useStore();
// const router = useRouter();

// 没有子级的侧边栏选项
const noChildren = () => {
  return menuData.value.filter((item) => !item.children);
};

// 有子级的侧边栏选项
const hasChildren = () => {
  return menuData.value.filter((item) => item.children);
};

// 根据role获取对应的侧边栏menu
const getMenuBaseOnRole = () => {
  if (store.state.user.role == 0) {
    menuData.value = store.state.adminMenu;
  } else if (store.state.user.role === 2) {
    menuData.value = store.state.sellerMenu;
  }
}

onMounted(() => {
  getMenuBaseOnRole();
})
</script>

<style lang="less" scoped>
.el-menu {
  height: 100%;
  border-right: 0;

  h3 {
    color: #e7e8ed;
    text-align: center;
    line-height: 48px;
    font-size: 16px;
    font-weight: 400;
  }
}
</style>